<!-- 对 divider 组件的编辑 -->
<template>
  <div class="menu-edit" v-if="dialogShow">
    <SetDesignDialog :title="name" :dialogVisible="dialogShow" :close="close" :saveclose="saveclose"
      ref="settingComponentDialog">
      <div class="edit-container-u">
        <el-tabs v-model="activeName">
          <el-tab-pane label="设置" name="1">
            <CommonComponentSet :defValue="bjComponent._other._commonComponent._name" :chgValue="(d)=>{bjComponent._other._commonComponent._name = d}" ref="commonComponentSet" />
            <el-form :label-width="formLabelWidth" @submit.native.prevent>
              <el-form-item label="菜单名称" style="margin-bottom:10px;">
                <el-input size="mini" v-model="data.title" maxlength="200" style="width:400px;"></el-input>
              </el-form-item>
            </el-form>
            <el-form :label-width="formLabelWidth">
              <el-form-item label="菜单样式" style="margin-bottom:10px;">
                <div class="icon-classifyType-list">
                  <ul class="clearfix">
                    <li v-for="clsf in 9" :key="clsf" :class="{selected: parseInt(data.theme) === clsf}"
                      @click="chooseClassifyType(clsf)">
                      <div class="item">
                        <div class="icon"><i :class="['icon-type-h', 'icon-type-h' + clsf]"></i></div>
                      </div>
                    </li>
                  </ul>
                </div>
              </el-form-item>
            </el-form>
            <el-row>
              <el-col :span="12" v-if="parseInt(data.theme) > 1">
                <el-form :label-width="formLabelWidth">
                  <el-form-item label="菜单颜色" style="margin-bottom:10px;">
                    <el-color-picker size="medium" v-model="data.config.color"></el-color-picker>
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="12">
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="数据内容" name="2">
            <MenuListEdit :data="data" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </SetDesignDialog>
  </div>
</template>

<script>
import Color from '@/components/common/design/dialog/component/formitem/Color.vue'
import CommonComponentSet from '@/components/common/design/dialog/component/formitem/CommonComponentSet.vue'
import SetDesignDialog from '@/components/common/dialog/SetDesignDialog.vue'
import * as WindowType from '@/config/windowtype.js'
import VueFunctions from '@/core/VueFunctions.js'
import BackendjsFunctions from '@/core/BackendjsFunctions.js'
import { mapState } from 'vuex'
import _ from 'lodash'

import MenuListEdit from '@/components/common/design/dialog/component/menu/MenuListEdit.vue'

export default {
  computed: {
    ...mapState([
      'design'
    ])
  },
  created () {
    VueFunctions.method(WindowType.EDIT_COMPONENT_WITH_COMPONENTMENUH, (bjComponent) => {
      this.close()
      this.dialogShow = true
      this.bjComponent = bjComponent
      this.data = bjComponent.render.data
      if (!this.bjComponent._other) {
        this.bjComponent._other = {}
      }
      if (!this.bjComponent._other._commonComponent) {
        this.bjComponent._other._commonComponent = {}
      }
      if (!this.bjComponent._other._commonComponent._name) {
        this.bjComponent._other._commonComponent._name = null
      }
      if (this.data.config.color === '') {
        this.$post('/site/get-current-theme-color', null).then(response => {
          if (response) {
            if (response.color === 'custom') {
              if (response.customThemeColor && response.customThemeColor.custom && response.customThemeColor.custom.length > 0) {
                this.data.config.color = response.customThemeColor.custom[0].defaultColor
              }
            } else {
              let num = parseInt(response.color)
              this.data.config.color = response.themeColor.color[num]
            }
          }
        })
      }
      this.$nextTick(() => {
        this.$refs['settingComponentDialog'].open()
      })
    })
  },
  mounted () {
  },
  data () {
    return {
      dialogShow: false,
      activeName: '1',
      formLabelWidth: '120px',
      name: '横向菜单',
      bjComponent: null,
      data: null
    }
  },
  watch: {
  },
  methods: {
    chooseClassifyType (clsf) {
      if (clsf === parseInt(this.data.theme)) {
        return
      }
      this.data.theme = clsf.toString()
    },
    close () {
      this.dialogShow = false
      this.activeName = '1'
      this.bjComponent = null
      this.data = null
    },
    saveclose () {
      let bool = this.$refs['commonComponentSet'].dataValid()
      if (!bool) {
        return
      }
      this.bjComponent.render.data = _.cloneDeep(this.data)
      if (!this.bjComponent._other._commonComponent._name) {
        this.bjComponent._other._commonComponent = null
      }
      BackendjsFunctions.saveComponent(this.bjComponent)
      this.close()
    }
  },
  components: {
    SetDesignDialog,
    Color,
    CommonComponentSet,
    MenuListEdit
  }
}

</script>

<style scoped lang="scss">
.edit-container-u {
  width: 750px;
  min-height: 450px;
}
.icon-classifyType-list {
  ul {
    list-style: none;
  }
  li {
    float: left;
    margin-right: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    cursor: pointer;
    .icon-type-h {
      background: url(~@/assets/images/menuH-type-img.png) no-repeat center;
      display: inline-block;
      *display: inline;
      *zoom: 1;
      vertical-align: middle;
      width: 84px;
      height: 58px;
    }
    .icon-type-h1 {
      background-position: -1px 0;
    }
    .icon-type-h2 {
      background-position: -105px 0;
    }
    .icon-type-h3 {
      background-position: -210px 0;
    }
    .icon-type-h4 {
      background-position: -315px 0;
    }
    .icon-type-h5 {
      background-position: -420px 0;
    }
    .icon-type-h6 {
      background-position: -525px 0;
    }
    .icon-type-h7 {
      background-position: -630px 0;
    }
    .icon-type-h8 {
      background-position: -1px -59px;
    }
    .icon-type-h9 {
      background-position: -105px -59px;
    }
    &.selected .icon-type-h{
      background-image: url(~@/assets/images/menuH-type-selected-img.png);
    }
  }
}
</style>
